import {Component, OnInit, Input, SimpleChanges, OnChanges} from '@angular/core';

@Component({
  selector: 'app-chart-three-diagram',
  templateUrl: './chart-three-diagram.component.html',
  styleUrls: ['./chart-three-diagram.component.css']
})
export class ChartThreeDiagramComponent implements OnInit, OnChanges {

  constructor() { }
  public chartOptions1;
  public chartOptions2;
  public chartOptions3;
  ngOnChanges(changes: SimpleChanges): void {
    if(changes['data1']){
      this.fillChart1();
    }
    if(changes['data2']){
      this.fillChart2();
    }
    if(changes['data3']){
      this.fillChart3();
    }
  }
  @Input() data1;
  @Input() data2;
  @Input() data3;
  @Input() title1;
  @Input() title2;
  @Input() title3;
  ngOnInit() {

  }
  fillChart1() {
    const Highcharts  = (<any>window)['Highcharts'];
    let data:any = this.data1;
    let title:any=this.title1;
    this.chartOptions1 = {
      type: 'line',
      title: {
        text: title?(title+"水头区间，效率偏差与负荷P关系趋势"):("水头区间，效率偏差与负荷P关系趋势")
      },
      xAxis: {
        title: {
          text: '工作水头H'
        },
        tickInterval:5,
        min:40,max:70
      },
      yAxis: {
        title: {
          text: '效率偏差 (%)'
        }
      },
      credits: {
        enabled: false},
      plotOptions: {
        line: {
          dataLabels: {
            enabled: false          // 开启数据标签
          },
          enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
        }
      },
      series: [{
        name: '数据',
        data: data,
        color: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(1).get()
      }]
    }
    // this.chartOptions2 = {
    //   chart: {
    //     type: 'line'
    //   },
    //   title: {
    //     text: '表二:振动值与负荷P关系趋势'
    //   },
    //   xAxis: {
    //     title: {
    //       text: '机组功率'
    //     },
    //     tickInterval:5,
    //     min:40,max:70
    //   },
    //   yAxis: {
    //     title: {
    //       text: '效率偏差 (%)'
    //     }
    //   },
    //   credits: {
    //     enabled: false},
    //   plotOptions: {
    //     line: {
    //       dataLabels: {
    //         enabled: false          // 开启数据标签
    //       },
    //       enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
    //     }
    //   },
    //   series: [{
    //     name: '数据',
    //     data: data2,
    //     color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(1).get()
    //   }]
    // }
    // this.chartOptions3 = {
    //   chart: {
    //     type: 'line',
    //     zoomType: 'x'
    //   },
    //   title: {
    //     text: '表三:振动值与时间关系趋势'
    //   },
    //   xAxis: {
    //     type: 'datetime'
    //   },
    //   yAxis: {
    //     title: {
    //       text: '效率偏差 (%)'
    //     }
    //   },
    //   tooltip: {
    //     crosshairs: true,
    //   },
    //   credits: {
    //     enabled: false},
    //   series: [{
    //     color: Highcharts.Color(Highcharts.getOptions().colors[5]).setOpacity(1).get(),
    //     name: '数据',
    //     data: data3
    //   }]
    // }
  }
  fillChart2() {
    const Highcharts  = (<any>window)['Highcharts'];
    let data:any = this.data2;
    let title:any = this.title2;
    this.chartOptions2 = {
      chart: {
        type: 'line'
      },
      title: {
          text: title?(title+"负荷区间，效率偏差与水头关系趋势"):("负荷区间，效率偏差与水头关系趋势")
      },
      xAxis: {
        title: {
          text: '机组功率'
        },
        tickInterval:5,
        min:40,max:70
      },
      yAxis: {
        title: {
          text: '效率偏差 (%)'
        }
      },
      credits: {
        enabled: false},
      plotOptions: {
        line: {
          dataLabels: {
            enabled: false          // 开启数据标签
          },
          enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
        }
      },
      series: [{
        name: '数据',
        data: data,
        color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(1).get()
      }]
    }
    // this.chartOptions3 = {
    //   chart: {
    //     type: 'line',
    //     zoomType: 'x'
    //   },
    //   title: {
    //     text: '表三:振动值与时间关系趋势'
    //   },
    //   xAxis: {
    //     type: 'datetime'
    //   },
    //   yAxis: {
    //     title: {
    //       text: '效率偏差 (%)'
    //     }
    //   },
    //   tooltip: {
    //     crosshairs: true,
    //   },
    //   credits: {
    //     enabled: false},
    //   series: [{
    //     color: Highcharts.Color(Highcharts.getOptions().colors[5]).setOpacity(1).get(),
    //     name: '数据',
    //     data: data3
    //   }]
    // }
  }
  fillChart3() {
    const Highcharts = (<any>window)['Highcharts'];
    let data: any = this.data3;
    let title1: any = this.title1;
    let title2: any = this.title2;
    this.chartOptions3 = {
      chart: {
        type: 'line',
        zoomType: 'x'
      },
      title: {
        text: title1?(title1+"水头、"+title2+"负荷P区间，效率偏差与时间关系趋势"):("水头、"+"负荷P区间，效率偏差与时间关系趋势"),
        style:{
          "fontSize":"15px"
        }
      },
      xAxis: {
        type: 'datetime'
      },
      yAxis: {
        title: {
          text: '效率偏差 (%)'
        }
      },
      tooltip: {
        crosshairs: true,
      },
      credits: {
        enabled: false},
      series: [{
        color: Highcharts.Color(Highcharts.getOptions().colors[5]).setOpacity(1).get(),
        name: '数据',
        data: data
      }]
    }
  }
  }
